<template>
<Card>
	<p slot="title">支付设置</p>
	<table class="minitable" long>
		<tr>
			<td bg-gray5 pd2>
				<span>支付宝支付</span>
				<i-switch v-model="model.canAlipay" right size="large" :disabled="!isEditing">
					<span slot="open">开启</span>
					<span slot="close">关闭</span>
				</i-switch>
			</td>
		</tr>
		<tr v-if="model.canAlipay">
			<td>
				<Form :model="model.alipayConfigInfo" :label-width=100 mgt3>
					<FormItem label="appid" prop="appId">
						<Input v-model="model.alipayConfigInfo.appId" :disabled="!isEditing" style="max-width:500px;" />
					</FormItem>
					<FormItem label="应用私钥" prop="appPrivateKey">
						<Input v-model="model.alipayConfigInfo.appPrivateKey" type="textarea" :rows=3 :disabled="!isEditing" />
					</FormItem>
					<FormItem label="支付宝公钥" prop="alipayPublicKey">
						<Input v-model="model.alipayConfigInfo.alipayPublicKey" type="textarea" :rows=3 :disabled="!isEditing" />
					</FormItem>
					<FormItem label="同步回调地址" prop="returnUrl">
						<Input v-model="model.alipayConfigInfo.returnUrl" :disabled="!isEditing" style="max-width:500px;" />
					</FormItem>
					<FormItem label="异步回调地址" prop="notifyUrl">
						<Input v-model="model.alipayConfigInfo.notifyUrl" :disabled="!isEditing" style="max-width:500px;" />
					</FormItem>
				</Form>
			</td>
		</tr>
		<tr>
			<td bg-gray5 pd2>
				<span>银行转账</span>
				<i-switch v-model="model.canBankTransfer" right size="large" :disabled="!isEditing">
					<span slot="open">开启</span>
					<span slot="close">关闭</span>
				</i-switch>
			</td>
		</tr>
		<tr v-if="model.canBankTransfer">
			<td pd2>
				<p>
					<Button @click="handleShowAddBankInfoModal(null)" :disabled="!isEditing">添加银行账户</Button>
				</p>

				<table class="minitable" long mgt2>
					<tr bg-gray5>
						<td text-center>银行名称</td>
						<td text-center>开户名</td>
						<td text-center>银行账号</td>
						<td>给买家需求</td>
						<td w6 text-center>操作</td>
					</tr>
					<tr v-for="(item, index) in model.bankInfos" :key="index">
						<td text-center>{{item.bankName}}</td>
						<td text-center>{{item.accountName}}</td>
						<td text-center>{{item.bankAccount}}</td>
						<td>{{item.remark}}</td>
						<td text-center>
							<Button size="small" mgr1 @click="handleShowAddBankInfoModal(index)" :disabled="!isEditing">编辑</Button>
							<Button size="small" type="error" @click="handleDeleteBankInfo(index)" :disabled="!isEditing">删除</Button>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

	<Modal v-model="bankInfoModel.showModal" :title="model.id?'修改银行账户':'添加银行账户'" :mask-closable="false">
		<Form :ref="bankInfoModel.formRef" :model="bankInfoModel.model" :label-width="100">
			<FormItem label="银行名称" prop="bankName" required>
				<Input v-model="bankInfoModel.model.bankName" />
			</FormItem>
			<FormItem label="开户名" prop="accountName" required>
				<Input v-model="bankInfoModel.model.accountName" />
			</FormItem>
			<FormItem label="银行账号" prop="bankAccount" required>
				<Input v-model="bankInfoModel.model.bankAccount" />
			</FormItem>
			<FormItem label="给买家留言" prop="remark">
				<Input v-model="bankInfoModel.model.remark" type="textarea" />
			</FormItem>
		</Form>
        <div slot="footer">
            <Button type="primary" @click="handleAddBankInfo">{{model.id?'保存':'添加'}}</Button>
            <Button @click="bankInfoModel.showModal=false">取消</Button>
        </div>
	</Modal>

	<p mgt3>
		<Button v-if="!isEditing" type="primary" @click="handleEdit">修改</Button>
		<Button v-if="isEditing" type="primary" @click="handleSave" mgr2>保存</Button>
		<Button v-if="isEditing" @click="handleCancel">取消</Button>
	</p>
</Card>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../../lib/abpbase'

@Component
export default class PaymentSetting extends AbpBase{
	model:any = {
		canAlipay: false,
		alipayConfigInfo: {
			appId: '',
			appPrivateKey: '',
			alipayPublicKey: '',
			returnUrl: '',
			notifyUrl: ''
		},
		canBankTransfer: false,
		bankInfos: []
	}
	bankInfoModel = {
		showModal: false,
		formRef: this.getRandomRef('payment-manager'),
		model: this.getDefaultBankInfoModel()
	}
	getDefaultBankInfoModel() {
		return {
			bankName: '',
			accountName: '',
			bankAccount: '',
			remark: ''
		};
	}
	handleShowAddBankInfoModal(index) {
		var item = null;
		if(index != null) {
			item = this.model.bankInfos[index];
		}console.log(item)

		if(item == null) {
			this.bankInfoModel.model = this.getDefaultBankInfoModel();
		}else {
			this.bankInfoModel.model = Object.assign({ id: true, index: index }, item);
		}
		this.bankInfoModel.showModal = true;
	}
	handleAddBankInfo() {
		this.validate(this.bankInfoModel.formRef, () => {
			if(!this.bankInfoModel.model.id) {
				this.model.bankInfos.push(this.bankInfoModel.model);
			}else {
				this.model.bankInfos[this.bankInfoModel.model.index] = this.bankInfoModel.model;
			}
			this.bankInfoModel.showModal = false;
		});
	}
	handleDeleteBankInfo(index) {
		this.confirm('确定要删除该银行账户吗？', () => {
			this.model.bankInfos.splice(index, 1);
		})
	}
	handleEdit() {
		this.isEditing = true;
	}
	async handleSave() {
		await this.setData();
		this.isEditing = false;
	}
	async handleCancel() {
		await this.getData();
		this.isEditing = false;
	}
	async getData() {
		var response = await this.get('Setting/GetPaymentSetting');
		if(response.success) {
			this.model = response.result;
		}
	}
	async setData() {
		var response = await this.post('Setting/SetPaymentSetting', this.model);
		if(response.success) {
			//this.$store.commit('setting/setShipSetting', this.model);
			this.success('保存成功');
		}
	}
	async created() {
		this.showPage = false;
		await this.getData();
		this.showPage = true;
	}
}
</script>